<template>
  <div>
    <h1>【aty-markdown】 component demo</h1>
    <p>【aty-markdown】 本质</p>
    <aty-row class="fd-markdown-box">
      <aty-title :level="4">1.【aty-markdown】 基础</aty-title>
      <aty-panel class="fd-markdown-01">
        <button ref="diy"
                type="button"
                @click="$click('selftest')"
                class="op-icon fa fa-mavon-align-left"
                aria-hidden="true"
                title="自定义">
        </button>
        <aty-markdown
          ref="md"
          :subfield="subfield"
          :toolbarsFlag="toolbarsFlag"
          :editable="editable"
          :language="d_language"
          :ishljs="true"
          v-model="help1"
          :imageFilter="image_filter"
          :imageClick="imageClick"
          @change="change"
          @full-screen="fullScreen"
          @readModel="readModel"
          @preview-toggle="previewToggle"
          @subfield-toggle="subfieldToggle"
          @save="saveone"
          @img-add="$imgAdd"
          @img-del="$imgDel"

          @ready="ready" />

      </aty-panel>
      <aty-panel>
        <aty-markdown />
      </aty-panel>
    </aty-row>

  </div>
</template>
<script>
import { configOptions } from '@/components/components/other/markdown/config/config-options.js'
console.log(configOptions)
export default {
  data () {
    return {
      markdown: null,
      imgName: '',
      subfield: true,
      toolbarsFlag: true,
      editable: true,
      d_language: 'zh-CN',
      help1: '',
      image_filter: function ($files) {
        console.log('image_filter files:', $files)
        console.log('here for you', $files)
        return true
      },
      /*
       * @description 编辑区域中所有的图片
       */
      img_file: {},

      help2: '',
      toolbars: {
        underline: true, // 下划线
        strikethrough: true, // 中划线
        alignCenter: true, // 中划线
        undo: true,
        save: true,
        fullscreen: true, // 全屏编辑
        navigation: true,
        preview: true,
        subfield: false
      },
      toolbar_settings: {
        undo: true, // 上一步
        redo: true, // 下一步
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        code: true, // code
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true, // 预览
        navigation: true // 导航目录
      },
      imageClick: function (file) {
        console.log(file)
      }
    }
  },
  methods: {
    // 清除缓存
    clearCache () {
      this.$refs.md.$emptyHistory()
    },
    // 更新图片
    uploadimg ($e) {
      // console.log(this.img_file);
      for (var _img in this.img_file) {
        this.$refs.md.$img2Url(_img, 'https://raw.githubusercontent.com/hinesboy/mavonEditor/master/img/cn/cn-common.png')
      }
      /*
       * var formdata = new FormData();
       * for (var _img in this.img_file) {
       * formdata.append(_img, this.img_file[_img]);
       * // _imglst.push([_img, this.img_file[_img]]);
       * }
       * axios({
       * url: 'http://127.0.0.1/index.php',
       * method: 'post',
       * data: formdata,
       * headers: {'Content-Type': 'multipart/form-data'},
       * }).then((res) => {
       * console.log(res);
       * })
       */
    },
    // 替换图片
    imgreplace ($e) {
      // console.log('here');
      this.$refs.md.$imglst2Url([
        [0, 'https://raw.githubusercontent.com/hinesboy/mavonEditor/master/img/cn/cn-common.png'],
        [1, 'https://raw.githubusercontent.com/hinesboy/mavonEditor/master/img/cn/cn-common.png']
      ])
    },
    // 删除图片
    imgdelete () {
      var md = this.$refs.md
      var toolbar_left = md.$refs.toolbar_left
      // 需要删除的图片名称
      toolbar_left.$imgDelByFilename(this.imgName)
    },
    // 自定一按钮的点击事件
    $click (val) {
      console.log(val)
    },

    /**
     * #method
     *
     * @name    change
     * @param   val
     * @param   render
     */
    change (val, render) {
      console.log('change')
      console.log(val)
      console.log(render)
    },
    fullScreen (status, val) {
      console.log('fullScreen')
      console.log(status)
      console.log(val)
    },
    readModel (status, val) {
      console.log('readModel')
      console.log(status)
      console.log(val)
    },
    previewToggle (status, val) {
      console.log('previewtoggle')
      console.log('status:' + status)
      console.log('val:' + val)
    },
    subfieldToggle (status, val) {
      console.log('subfieldToggle')
      console.log('status:' + status)
      console.log('val:' + val)
    },

    /**
     * #method
     *
     * @name    saveone
     * @param   val
     * @param   render
     */
    saveone (val, render) {
      alert('save one')
    },

    /**
     * #method
     *
     * @name    $imgAdd
     * @param   pos
     * @param   $file
     */
    $imgAdd (pos, $file) {
      //  debugger
      console.log('imgAdd', pos, $file)
      this.img_file[pos] = $file
      /*
       * console.log(this.$refs.md.$refs.toolbar_left.$imgDelByFilename(pos));
       * console.log(this.$refs.md.$refs.toolbar_left.$imgAddByFilename('./test', $file))
       * console.log(this.$refs.md.$refs.toolbar_left.$imgUpdateByFilename('./test', $file))
       * console.log(this.$refs.md.$refs.toolbar_left.$imgAddByFilename('./test', $file))
       * console.log(this.$refs.md);
       * this.$refs.md.$imgUpdateByUrl(pos, 'http://pic.58pic.com/58pic/13/46/50/61758PICWZY_1024.jpg');
       */
    },
    /**
     * #method
     *
     * @name    $imgDel
     * @param   pos
     */
    $imgDel (pos) {
      console.log('imgDel', pos)
      delete this.img_file[pos]
    },

    /**
     * #method
     *
     * @name    $subfieldtoggle
     * @param   flag
     * @param   value
     */
    $subfieldtoggle (flag, value) {
      console.log('sufield toggle' + flag)
    },
    // 加载完后
    ready (_this) {
      this.markdown = _this
    }
  },
  created () {
    var $vm = this
    this.help1 = configOptions[`help_${this.d_language}`]
  },
  mounted () {
    var md = this.$refs.md
    var toolbar_left = md.$refs.toolbar_left
    var diy = this.$refs.diy
    toolbar_left.$el.append(diy)
    /*
     * toolbar_left.$el.append(diy.$el)
     * console.log(toolbar_left)
     */
    setTimeout(() => {
      console.log('10秒后输出')
      console.log(this.markdown)
      console.log(this.markdown.getRenderContent())
    }, 10000)
  }
  //  components: { Alert, Icon }
}
</script>
<style lang="less" type="text/less"  scoped>
    .fd-markdown-box {
        margin: 20px;
    }
    .fd-markdown-01 {
        margin-bottom: 20px;
        width: 100%;
        height: 600px;
        border: 1px solid #ddd;
    }
</style>
